<template>
    <div class="pieChart" ref="pieChart"></div>
</template>

<script>
import {getPieData} from '@/api/home'
import * as echarts from 'echarts'
export default {
    name:'PieChart',
    data(){
        return {
            pieDataList:[]
        }
    },
    methods:{
        getData(){
            getPieData().then(res => {
                this.pieDataList = res.data
                this.draw()
            })
        },
        draw(){
            let myChart = echarts.init(this.$refs.pieChart)
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '已售品牌数量',
                    left: 'center',
                    textStyle:{
                        //文字颜色
                        color:'#303133',
                        //字体风格,'normal','italic','oblique'
                        fontStyle:'normal',
                        //字体大小
                        fontSize:14
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:['#4cb9d8', '#fece84','#fd4f68','#93ce7c','#566ec4'],
                series: [
                    {
                        name: '已售品牌数量',
                        type: 'pie',
                        radius: '50%',
                        data: this.pieDataList,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
             // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    },
    mounted(){
        this.getData()
    }
}
</script>

<style lang="less" scoped>
.pieChart{
    width: 100%;
    height: 100%;
}
</style>